<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词学习</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-6 py-3 bg-white">
        <span class="text-sm font-medium text-gray-800">9:41</span>
        <div class="flex items-center space-x-1 text-gray-800">
            <i class="fas fa-signal text-sm"></i>
            <i class="fas fa-wifi text-sm"></i>
            <i class="fas fa-battery-three-quarters text-sm"></i>
        </div>
    </div>

    <!-- 头部 -->
    <div class="bg-white px-6 py-4 border-b border-gray-100">
        <div class="flex items-center justify-between">
            <i class="fas fa-arrow-left text-gray-600 text-xl"></i>
            <h1 class="text-xl font-bold text-gray-800">单词学习</h1>
            <i class="fas fa-search text-gray-600 text-xl"></i>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-6 py-6 pb-20">
        <!-- 学习分类 -->
        <div class="mb-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">学习分类</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-gradient-to-br from-orange-400 to-pink-500 rounded-2xl p-6 text-white">
                    <div class="flex items-center justify-between mb-3">
                        <i class="fas fa-paw text-2xl"></i>
                        <span class="bg-white/20 px-2 py-1 rounded-full text-xs">20词</span>
                    </div>
                    <h3 class="font-bold text-lg mb-1">动物</h3>
                    <p class="text-white/80 text-sm">可爱的小动物</p>
                </div>
                
                <div class="bg-gradient-to-br from-green-400 to-blue-500 rounded-2xl p-6 text-white">
                    <div class="flex items-center justify-between mb-3">
                        <i class="fas fa-apple-alt text-2xl"></i>
                        <span class="bg-white/20 px-2 py-1 rounded-full text-xs">15词</span>
                    </div>
                    <h3 class="font-bold text-lg mb-1">水果</h3>
                    <p class="text-white/80 text-sm">美味的水果</p>
                </div>
                
                <div class="bg-gradient-to-br from-purple-400 to-indigo-500 rounded-2xl p-6 text-white">
                    <div class="flex items-center justify-between mb-3">
                        <i class="fas fa-palette text-2xl"></i>
                        <span class="bg-white/20 px-2 py-1 rounded-full text-xs">12词</span>
                    </div>
                    <h3 class="font-bold text-lg mb-1">颜色</h3>
                    <p class="text-white/80 text-sm">彩虹的颜色</p>
                </div>
                
                <div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl p-6 text-white">
                    <div class="flex items-center justify-between mb-3">
                        <i class="fas fa-home text-2xl"></i>
                        <span class="bg-white/20 px-2 py-1 rounded-full text-xs">18词</span>
                    </div>
                    <h3 class="font-bold text-lg mb-1">家庭</h3>
                    <p class="text-white/80 text-sm">温馨的家</p>
                </div>
            </div>
        </div>

        <!-- 今日单词 -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-800">今日单词</h2>
                <span class="text-blue-500 text-sm font-medium">查看全部</span>
            </div>
            
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
                <div class="text-center mb-6">
                    <img src="https://images.unsplash.com/photo-1574781330855-d0db8cc6a79c?w=120&h=120&fit=crop" 
                         alt="猫" class="w-24 h-24 rounded-2xl mx-auto mb-4 object-cover">
                    <h3 class="text-2xl font-bold text-gray-800 mb-2">Cat</h3>
                    <p class="text-gray-500 mb-3">/kæt/ 猫</p>
                    <button class="bg-blue-500 text-white px-6 py-2 rounded-full flex items-center mx-auto">
                        <i class="fas fa-volume-up mr-2"></i>
                        发音
                    </button>
                </div>
                
                <div class="border-t border-gray-100 pt-4">
                    <p class="text-gray-600 text-sm mb-3">例句：</p>
                    <p class="text-gray-800 italic">"The cat is sleeping on the sofa."</p>
                    <p class="text-gray-500 text-sm mt-1">猫在沙发上睡觉。</p>
                </div>
            </div>
        </div>

        <!-- 学习进度 -->
        <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-6 text-white">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold">学习进度</h3>
                <span class="text-white/80 text-sm">本周</span>
            </div>
            <div class="flex items-center space-x-4">
                <div class="flex-1">
                    <div class="flex justify-between text-sm mb-2">
                        <span>已学习</span>
                        <span>45/60</span>
                    </div>
                    <div class="w-full bg-white/20 rounded-full h-2">
                        <div class="bg-yellow-400 h-2 rounded-full" style="width: 75%"></div>
                    </div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold">75%</div>
                    <div class="text-white/80 text-xs">完成度</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-3">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">首页</span>
            </div>
            <div class="text-center">
                <i class="fas fa-book text-blue-500 text-xl mb-1"></i>
                <span class="text-blue-500 text-xs font-medium">学习</span>
            </div>
            <div class="text-center">
                <i class="fas fa-gamepad text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">游戏</span>
            </div>
            <div class="text-center">
                <i class="fas fa-chart-line text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">进度</span>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">我的</span>
            </div>
        </div>
    </div>
</body>
</html>